<template>
    <div class="memberManage">
        <van-notify id="editor-notify" />
        <van-dialog id="van-dialog" />
        <div class="main">
            <van-cell-group inset class="cells">
                <xin-swipe-cell :title="card.title" :label="card.description" v-for="card in CardResult"
                    :key="card.title" :button='[{ name: "修改", type: "primary" }]' @click="change(card)">
                </xin-swipe-cell>
            </van-cell-group>

            <van-empty class="empty" v-if="!UserResult.length" image="search"
                description="这里为空，请搜索哦！\n 这里是修改已经发布的心语签的地方哦！" />
        </div>


        <van-search :value="search.value" shape="round" @change.native="updateSearchValue" @search="searchCard"
            background="#4fc08d" placeholder="请输入心语签标题，回车搜索" />
    </div>
</template>

<script>

import $store from "@/store/index.js";
import vanSearch from "@/wxcomponents/weapp/dist/search/index";
import vanCellGroup from "@/wxcomponents/weapp/dist/cell-group/index";
import vanEmpty from "@/wxcomponents/weapp/dist/empty/index";
import vanCell from "@/wxcomponents/weapp/dist/cell/index";
import vanTag from "@/wxcomponents/weapp/dist/tag/index";
import throttle from "@/node_modules/lodash-es/throttle.js";
import Notify from "@/wxcomponents/weapp/dist/notify/notify";
import { db } from "../../store/cloudInit";
export default {
    components: {
        vanSearch,
        vanCellGroup,
        vanCell,
        vanEmpty,
        vanTag,
    },
    computed: {

    },
    data() {
        return {
            search: { value: "" },
            CardResult: []
        };
    },
    methods: {
        APISearch(val) {
            console.log(val);
        },
        searchCard: throttle(function () {
            console.log("搜索", this.search.value);
            if (this.search.value.replace(/\s/g, "")) {
                Notify({
                    type: "success",
                    message: "搜索中，请稍等",
                    selector: "#editor-notify",
                });
                db.collection("PublicXin").where(
                    {
                        title: new db.RegExp({
                            regexp: this.search.value,
                            options: "i",
                        })
                    }
                ).get()
                    .then(({ data }) => {
                        this.CardResult = data
                    }).catch((err) => {
                        console.log(err);
                        Notify({
                            type: "danger",
                            message: "搜索错误了",
                            selector: "#editor-notify",
                        });
                    });
            }
        }, 1000),
        updateSearchValue({ detail }) {
            this.search.value = detail;
        },
        change(item) {
            $store.commit("changeEditingXin", item);
            wx.navigateTo({ url: "../editor/index" });
        }

    },
};
</script>

<style lang="less" scoped>
.pageControl {
    width: 100%;
    justify-content: space-evenly;
    margin: 8rpx;
}

.memberManage {
    overflow: scroll;
    height: 100%;
    display: flex;
    flex-direction: column;

    .main {
        flex: 1;
        height: 100%;
        width: 100%;
    }

    .empty {
        height: 100%;
        width: 100%;
    }

    .cells {
        box-shadow: 0 8px 12px #ebedf0;
    }
}
</style>
